// 用户注册界面
<template>

  <div class="login_container">
    <!-- 图标区域 -->
    <div class="login_box">
      <div class="avatar_box">
        <img src="../assets/images/logo.png" alt="" />
      </div>

      <!-- 编辑用户新增对话框 visible.sync 控制对话框的显示-->

        <!-- 定义用户提交表单数据-->
        <h1  class="xyhzc">新用户注册</h1>
        <el-form
          :model="addUserModel"
          :rules="rules"
          ref="addUserRef"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item prop="email">
            <el-input v-model="addUserModel.email" placeholder="请输入邮箱地址">邮箱地址</el-input>
          </el-form-item>
          <el-form-item prop="username">
            <el-input v-model="addUserModel.username" placeholder="请输入用户名">用户名称</el-input>
          </el-form-item>
          <el-form-item  prop="password">
            <el-input
              v-model="addUserModel.password"
              type="password" placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password2">
            <el-input
              v-model="addUserModel.password2"
              type="password" placeholder="请确认密码"
            >密码确认</el-input>
          </el-form-item>
          <el-form-item  prop="phone">
            <el-input v-model="addUserModel.phone" placeholder="请输入电话号码">电话号码</el-input>
          </el-form-item>
        
          <el-form-item>
          <el-button type="primary" @click="addUserBtn" class="el-button-zc">立即注册</el-button>
          </el-form-item>
          <el-form-item>
          <el-button @click="logout"  class="el-button-zc">立即登录</el-button>
          </el-form-item>
        </el-form>


    </div>
  </div>
</template>

<script>
export default {
  data() {
    //校验邮箱规则 rule校验规则   value校验的数据   callback回调函数
    const checkEmail = (rule, value, callback) => {
      //定义邮箱的正则表达式  JS中用/来表示正则表达式的开始和结束
      const emailRege = /^[a-zA-Z0-9-_]+@[a-zA-Z0-9-_]+\.[a-zA-Z0-9-_]+$/;
      //正则表达式语法校验  test(xx) 校验成功 返回true  校验失败返回false
      if (emailRege.test(value)) {
        //表示邮箱合法 正确返回
        return callback();
      }
      callback(new Error("请填写正确的邮箱地址"));
    };

    //校验手机号的邮箱规则
    const checkPhone = (rule, value, callback) => {
      //定义校验手机号的正则语法
      const phoneRege = /^1[34578][0-9]{9}$/;
      if (phoneRege.test(value)) {
        return callback();
      }
      callback(new Error("请填写正确的手机号"));
    };

    const checkPassword = (rule, value, callback) => {
      if (this.addUserModel.password !== value)
        return callback(new Error("2次密码输入不一致"));
      //否则校验成功
      callback();
    };

    return {
      addUserModel: {
        username: '',
        password: '',
        password2: '',
        email: '',
        phone: '',
      },
      //数据校验规则
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 30,
            message: "长度在 3 到 30 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 30,
            message: "长度在 3 到 30 个字符",
            trigger: "blur",
          },
        ],
        password2: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 30,
            message: "长度在 3 到 30 个字符",
            trigger: "blur",
          },
          { validator: checkPassword, trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            min: 3,
            max: 30,
            message: "长度在 3 到 30 个字符",
            trigger: "blur",
          },
          { validator: checkPhone, trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          {
            min: 3,
            max: 30,
            message: "长度在 3 到 30 个字符",
            trigger: "blur",
          },
          { validator: checkEmail, trigger: "blur" },
        ],
      },

    };
  },
  methods: {
    
    //校验用户数据
    addUserBtn() {
      //1.获取表单数据
      this.$refs.addUserRef.validate(async (valid) => {
        //2.当程序没有通过校验时 程序终止
        if (!valid) return;
        //3.发起ajax请求, 实现业务调用
        //参数1: url地址   参数2:传递的数据
        // console.log(this.addUserModel)
        let { data: result } = await this.$http.post(
          "/user/register",
          this.addUserModel
        );
        // console.log(result.status)
        //4.判断用户校验是否正常 status=200  201 202 203 204
        if(result.isValid == 201){
          console.log(result.isValid)
          return this.$message.error("用户已存在！请换个邮箱重新注册");
        }
        else if(result.isValid == 202){
          console.log(result.isValid)
          return this.$message.error("用户未激活！请尽快前往邮箱进行账号激活");
        }
        else if(result.isValid == 203){
          console.log(result.isValid)
          return this.$message.error("账号异常，请联系爱忆港客服!");
        }
        else if(result.isValid == 204){
          console.log(result.isValid)
          return this.$message.error("注册成功！请在24小时以内前往邮箱进行账号激活!");
        }
        else if(result.isValid == 205){
          console.log(result.isValid)
          return this.$message.error("注册失败！");
        }
        else{
          this.$message.success("服务器异常！");
        }
        //重置表格数据
        this.$refs.addUserRef.resetFields();
      });
    },
    logout() {
      //1.删除token数据
      window.sessionStorage.clear();

      //2.跳转到用户登录页面  注意路径的写法 加/
      this.$router.push("/login");
    },
  }
};
</script>

<style lang="less" scoped>
.login_container {
  background-image: url(../assets/login.png);
  height: 100%;
}

.login_box {
  width: 600px;
  height: 450px;
//   background-color: aliceblue;
  border-radius: 3px;
  position: absolute;
  left: 45%;
  top: 55%;
  transform: translate(-50%, -50%);
}
.avatar_box {
  height: 120px;
  width: 300px;
  position: absolute;
  left: -30px;
  top: -10%;
  transform: translate(0, -100%);
  img {
    width: 100%;
    height: 100%;
  }
}

.demo-ruleForm {
  position: absolute;
  bottom: -80px;
  width: 100%;
  padding: 80px;
  box-sizing: border-box;
  }
  .el-button-zc{
      width: 340px;
  }
  .xyhzc{
      position: absolute;
  left: 265px;
  top: -5%;
  transform: translate(0, -100%);
  }
</style>